import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsStyle from './ChartsBar.less';

export default class ChartsBar extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  };
  drawChart = () => {
    let { data, isScale = false , yAxisName = ''} = this.props;
    let x = data[0],
        areaData = data[1].map((item)=>Math.round(item)),
        parentAreaData = data[2].map((item)=>Math.round(item)),
        areName = data[3][0],
        parentAreaName = data[3][1];

  	//引入echaets,链接画布
  	let myChart = echarts.init(findDOMNode(this.refs.charts));
  	let option = {};
  	//处理图表数据
    option = {
      tooltip: {
          trigger: 'axis',
          formatter:`<p style="background: #5e6166; color: #fff; padding: 5px;">{b1}</p><p style="padding: 5px;">{a0}:{c0}${isScale?'%':''}</p><p style="padding: 5px;">{a1}:{c1}${isScale?'%':''}</p>`,
          backgroundColor: '#ececec',
          axisPointer:{lineStyle:{opacity:0}},
          padding: 0,
          textStyle: {
            color: '#5e6166'
          }
        },
      legend: {
        data: [`${parentAreaName}`, `${areName}`],
        left:'3%'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: x,
        axisTick:{
          show:false,
        },
        axisLine:{
          show:false,
        },
        splitLine:{
          show:false
        },
        axisLabel:{   
            textStyle:{
              color:'#6a6d72'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        name:`${yAxisName}`,
        nameLocation:'start',
        splitNumber:7,
        axisLabel:{
          formatter:`{value}${isScale?'%':''}`,
          textStyle:{
              color:'#6a6d72'
        }
        },
        axisTick:{
          show:false,
        },
        axisLine:{
          show:false,
        },
        splitLine:{
          show:true
        }
      }],
      series: [{
          name: `${parentAreaName}`,
          type: 'bar',
          barWidth:14,
          barGap:0,
          itemStyle:{
            normal:{
              color:'#64dcdc'
            }
          },
          data: parentAreaData
        },

        {
          name: `${areName}`,
          type: 'bar',
          barWidth:14,
          barGap:0,
          itemStyle:{
            normal:{
              color:'#fcc622'
            }
          },
          data: areaData
        }
      ]
    };
  	//绘制图表
  	myChart.setOption(option);

  };
  componentDidMount() {
  	//初始加载绘图
  	this.drawChart()
  };
  componentWillReceiveProps(nextProps) {
  	//数据变化画图
  	this.drawChart()
  }
  render() {
    return (
      <div ref = 'charts' className={ChartsStyle.chartBar} ></div>
    );
  }
};
